<!DOCTYPE html>
<html style="height: 100%;">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="renderer" content="webkit" />
	<!-- 让360浏览器默认选择webkit内核 -->

    <!-- 全局css -->
    <link rel="shortcut icon" href="/static/favicon.ico">
    <link href="/static/libs/bootstrap/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/static/libs/font-awesome/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="/static/libs/ztree/zTreeStyle.css" rel="stylesheet">
    <link href="/static/backend/common.css" rel="stylesheet">
	<link href="/static/libs/hisui/css/hisui.min.css" rel="stylesheet">

    <!-- 全局js -->
    <script src="/static/libs/jquery/jquery.min.js?v=2.1.4"></script>
    <script src="/static/libs/bootstrap/bootstrap.min.js?v=3.3.6"></script>
    <script src="/static/libs/ztree/jquery.ztree.all.min.js"></script>
    <script src="/static/libs/ztree/jquery.ztree.exhide.min.js"></script>
    <script src="/static/libs/ztree/fuzzySearch.js"></script>
	<script src="/static/libs/hisui/js/jquery.hisui.js"></script>
	<script src="/static/libs/hisui/js/locale/hisui-lang-zh_CN.js"></script>


</head>
<body style="height: 100%;">
<div class="inner-fit">
<div class="hisui-layout" data-options="fit:true">
	<div data-options="region:'east',title:'已选择的人员',split:true" style="width:180px;overflow: hidden;">
		<div class="row">
			<div class="col-xs-12">
				<select id="selectUser"  style="width:100%;height:349px; border:0px;overflow-x: hidden;overflow-y: scroll;" multiple>
				</select>
			</div>
		</div>
	</div>
	<div data-options="region:'center',split:true"  style="overflow: hidden;padding:10px">
		<div id="tt2" class="hisui-tabs tabs-keywords"  style="width:325px;height:360px;overflow: hidden">
			<div title="组织机构" style="padding:0px">
				<div class="treeSearchInput" id="orgSearch" style="width:300px;display: none;">
					<label for="orgKeyword">关键字：</label>
					<input type="text" class="empty" id="orgKeyword" maxlength="50">
					<button class="btn" onclick="orgSearchNode()">搜索</button>
				</div>
				<div class="treeShowHideButton" onclick="orgSearch();"  style="width:50px;position:inherit;margin-top: 15px;float:right">
					<label id="orgBtnShow" title="显示搜索" >︾</label>
					<label id="orgBtnHide" title="隐藏搜索" style="display: none;">︽</label>
				</div>
				<div class="treeExpandCollapse">
					<a href="javascript:" onclick="orgTree.expandAll(true);">展开</a>
					<a href="javascript:" onclick="orgTree.expandAll(false);">折叠</a>
				</div>
				<div id="orgTree" class="ztree treeselect" ></div>
			</div>
			<div title="公共群组" style="padding:0px" id="group">
				<div class="treeSearchInput" id="publicGroupSearch" style="width:300px;display: none;">
					<label for="publicGroupKeyword">关键字：</label>
					<input type="text" class="empty" id="publicGroupKeyword" maxlength="50">
					<button class="btn" onclick="publicGroupSearchNode()">搜索</button>
				</div>
				<div class="treeShowHideButton" onclick="publicGroupSearch();"  style="width:50px;position:inherit;margin-top: 15px;float:right">
					<label id="publicGroupBtnShow" title="显示搜索" >︾</label>
					<label id="publicGroupBtnHide" title="隐藏搜索" style="display: none;">︽</label>
				</div>
				<div class="treeExpandCollapse">
					<a href="javascript:" onclick="publicGroupTree.expandAll(true);">展开</a>
					<a href="javascript:" onclick="publicGroupTree.expandAll(false);">折叠</a>
				</div>
				<div id="publicGroupTree" class="ztree treeselect" ></div>
			</div>
			<div title="个人群组" style="padding:0px" id="group">
				<div class="treeSearchInput" id="privateGroupSearch" style="width:300px;display: none;">
					<label for="privateGroupKeyword">关键字：</label>
					<input type="text" class="empty" id="privateGroupKeyword" maxlength="50">
					<button class="btn" onclick="privateGroupSearchNode()">搜索</button>
				</div>
				<div class="treeShowHideButton" onclick="privateGroupSearch();"  style="width:50px;position:inherit;margin-top: 15px;float:right">
					<label id="privateGroupBtnShow" title="显示搜索" >︾</label>
					<label id="privateGroupBtnHide" title="隐藏搜索" style="display: none;">︽</label>
				</div>
				<div class="treeExpandCollapse">
					<a href="javascript:" onclick="privateGroupTree.expandAll(true);">展开</a>
					<a href="javascript:" onclick="privateGroupTree.expandAll(false);">折叠</a>
				</div>
				<div id="privateGroupTree" class="ztree treeselect" ></div>
			</div>

		</div>

	<!--
        <div class="col-xs-4"  style="border:1px solid #e8e8e8; margin: 5px 0px 0px 10px;width: 200px;word-wrap:break-word;height: 360px" >
            <h4>已选择的人</h4>
            <hr style="margin-top: 0px;margin-bottom: 0px">

        </div>-->
    </div>
</div>
</div>
<style type="text/css">
	.ztree li span.button.dept_ico_open{margin-right:2px; background: url(/static/libs/hisui/css/icons/house.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
	.ztree li span.button.dept_ico_close{margin-right:2px; background: url(/static/libs/hisui/css/icons/house.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
	.ztree li span.button.dept_ico_docu{margin-right:2px; background: url(/static/libs/hisui/css/icons/house.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
	.ztree li span.button.user_ico_docu{margin-right:2px; background: url(/static/libs/hisui/css/icons/person.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
</style>

<script type="text/javascript">
//全局
var mapData = {};
var isMulti = false;

function onclick(event, treeId, treeNode) {
	if(isMulti){
	    if(!treeNode.isParent){
           	addSelectUser(treeNode);
	    }else {
	        recursion(treeNode);
	    }
	}else{
	    if(!treeNode.isParent) {
	    	allClear();
            addSelectUser(treeNode);
	    }
	}
}
function addSelectUser(treeNode){
    if(mapData[treeNode.id.toString()] == "" || mapData[treeNode.id.toString()] == null){
        mapData[treeNode.id.toString()] =  treeNode.name;
        $("#selectUser").append("<option value="+ treeNode.id + ">" + treeNode.name + "</option>");
    }
}
function recursion(treeNode) {
    for ( var idx in treeNode.children) {
        var node = treeNode.children[idx];
        if(!node.isParent){
            addSelectUser(node);
        }else {
        	recursion(node);
        }
    }
}
function ondbclick(event, treeId, treeNode) {
        mapData[treeNode.id.toString()] = treeNode.name;
        parent.$('#' + window.name).closest('.layui-layer').find(
            ".layui-layer-btn0").trigger("click");
}
function allClear() {
    mapData={};
    $("#selectUser").empty();
}
$("#selectUser").dblclick(function(){
	$("#selectUser option").each(function(){
		if(this.selected==true){
			delete mapData[$(this).val().toString()];
			$(this).remove();
		}
	});
});
//组织机构
var orgTree ;
var initOrgTree = function(url, ids) {
    var setting = {
            view : {
                selectedMulti : false,
                dblClickExpand : false
            },
            check : {
                enable : false,
                nocheckInherit : true,
                chkboxType: { "Y": "s", "N": "s" }
            },
            data : {
                simpleData : {
                    enable : true
                }
            },
        callback : {
            onClick : function(event, treeId, treeNode) {
                onclick(event, treeId, treeNode);
            },
            onDblClick : function(event, treeId, treeNode) {
                if(treeNode.isParent){
                    $.messager.popover({msg: '不可以选择部门哦！',type:'info',timeout: 2000,showType: 'show'});
                    return false;
				}else {
                    ondbclick(event, treeId, treeNode);
                }
            }
        }
        };
    $.get(url + "?t=" + new Date().getTime(), function(zNodes) {
        orgTree = $.fn.zTree.init($("#orgTree"), setting, zNodes);
        if (zNodes && zNodes.length > 0) {
            var attrName = zNodes[0].value ? 'value' : 'id';
            if(ids&&ids!=""){
                var selectCodes = ids.split(",");
                selectCheckNode(attrName, selectCodes);
            }
        }
    });
};
function selectCheckNode(attrName, selectCodes) {
    for (var i = 0; i < selectCodes.length; i++) {
        var node = orgTree.getNodeByParam(attrName,selectCodes[i]);
        mapData[node.id] = node.name;
        $("#selectUser").append("<option value=" + node.id + ">" + node.name + "</option>");
    }
}

var orgLastValue = "", orgTreeNodeList = [], orgKeyword = $("#orgKeyword");
orgKeyword.bind("focus", orgFocusKey).bind("blur", orgBlurKey).bind("change cut input propertychange", orgSearchNode);
orgKeyword.bind("keydown", function(e) {
    if (e.which == 13) {
        orgSearchNode();
    }
});
function orgFocusKey(e) {
    if (orgKeyword.hasClass("empty")) {
        orgKeyword.removeClass("empty");
    }
}
function orgBlurKey(e) {
    if (orgKeyword.get(0).value === "") {
        orgKeyword.addClass("empty");
    }
    orgSearchNode(e);
}

function orgSearchNode() {
    var value = $.trim(orgKeyword.get(0).value);
    if (orgLastValue === value) {
        return;
    }
    orgLastValue = value;
    var nodes = orgTree.getNodes();
    if (value == "") {
        orgTreeShowAllNode(nodes);
        return;
    }
    orgTreeHideAllNode(nodes);
    var ls1  = orgTree.getNodesByParamFuzzy("name", value);
    var ls2 = orgTree.getNodesByParamFuzzy("pinyin", value);
    var ls3 = orgTree.getNodesByParamFuzzy("initials", value);
    orgTreeNodeList = ls1;
    orgTreeNodeList = orgTreeNodeList.concat(ls2);
    orgTreeNodeList = orgTreeNodeList.concat(ls3);
    orgTreeUpdateNodes(orgTreeNodeList);
}

function orgTreeUpdateNodes(nodes) {
    orgTree.showNodes(nodes);
    for (var i = 0, l = nodes.length; i < l; i++) {
        var treeNode = nodes[i];
        orgTreeShowChildren(treeNode);
        orgTreeShowParent(treeNode)
    }
}
function orgTreeShowChildren(treeNode) {
    if (treeNode.isParent) {
        for ( var idx in treeNode.children) {
            var node = treeNode.children[idx];
            orgTree.showNode(node);
            orgTreeShowChildren(node);
        }
    }
}
function orgTreeShowParent(treeNode) {
    var parentNode;
    while ((parentNode = treeNode.getParentNode()) != null) {
        orgTree.showNode(parentNode);
        orgTree.expandNode(parentNode, true, false, false);
        treeNode = parentNode;
    }
}
function orgTreeShowAllNode(nodes) {
    nodes = orgTree.transformToArray(nodes);
    for (var i = nodes.length - 1; i >= 0; i--) {
        if (nodes[i].getParentNode() != null) {
            orgTree.expandNode(nodes[i], false, false, false, false);
        } else {
            orgTree.expandNode(nodes[i], true, true, false, false);
        }
        orgTree.showNode(nodes[i]);
        orgTreeShowAllNode(nodes[i].children);
    }
}
function orgTreeHideAllNode(nodes) {
    nodes = orgTree.transformToArray(nodes);
    for (var i = nodes.length - 1; i >= 0; i--) {
        orgTree.hideNode(nodes[i]);
    }
}

function orgSearch($this) {
    $('#orgSearch').slideToggle(200);
    $('#orgBtnShow').toggle();
    $('#orgBtnHide').toggle();
    $('#orgKeyword').focus();
}
//公共群组
var publicGroupTree ;
var initPublicGroupTree = function(url) {
    var setting = {
            view : {
                selectedMulti : false,
                dblClickExpand : false
            },
            check : {
                enable : false,
                nocheckInherit : true,
                chkboxType: { "Y": "s", "N": "s" }
            },
            data : {
                simpleData : {
                    enable : true
                }
            },
        callback : {
            onClick : function(event, treeId, treeNode) {
                onclick(event, treeId, treeNode);
            },
            onDblClick : function(event, treeId, treeNode) {
                if(treeNode.isParent){
                    $.messager.popover({msg: '不可以选择部门哦！',type:'info',timeout: 2000,showType: 'show'});
                    return false;
				}else {
                    ondbclick(event, treeId, treeNode);
                }
            }
        }
        };
    $.get(url + "?t=" + new Date().getTime(), function(zNodes) {
        publicGroupTree = $.fn.zTree.init($("#publicGroupTree"), setting, zNodes);
    });
};

var publicGroupLastValue = "", publicGroupTreeNodeList = [], publicGroupKeyword = $("#publicGroupKeyword");
publicGroupKeyword.bind("focus", publicGroupFocusKey).bind("blur", publicGroupBlurKey).bind("change cut input propertychange", publicGroupSearchNode);
publicGroupKeyword.bind("keydown", function(e) {
    if (e.which == 13) {
        publicGroupSearchNode();
    }
});
function publicGroupFocusKey(e) {
    if (publicGroupKeyword.hasClass("empty")) {
        publicGroupKeyword.removeClass("empty");
    }
}
function publicGroupBlurKey(e) {
    if (publicGroupKeyword.get(0).value === "") {
        publicGroupKeyword.addClass("empty");
    }
    publicGroupSearchNode(e);
}

function publicGroupSearchNode() {
    var value = $.trim(publicGroupKeyword.get(0).value);
    if (publicGroupLastValue === value) {
        return;
    }
    publicGroupLastValue = value;
    var nodes = publicGroupTree.getNodes();
    if (value == "") {
        publicGroupTreeShowAllNode(nodes);
        return;
    }
    publicGroupTreeHideAllNode(nodes);
    var ls1  = publicGroupTree.getNodesByParamFuzzy("name", value);
    var ls2 = publicGroupTree.getNodesByParamFuzzy("pinyin", value);
    var ls3 = publicGroupTree.getNodesByParamFuzzy("initials", value);
    publicGroupTreeNodeList = ls1;
    publicGroupTreeNodeList = publicGroupTreeNodeList.concat(ls2);
    publicGroupTreeNodeList = publicGroupTreeNodeList.concat(ls3);
    publicGroupTreeUpdateNodes(publicGroupTreeNodeList);
}

function publicGroupTreeUpdateNodes(nodes) {
    publicGroupTree.showNodes(nodes);
    for (var i = 0, l = nodes.length; i < l; i++) {
        var treeNode = nodes[i];
        publicGroupTreeShowChildren(treeNode);
        publicGroupTreeShowParent(treeNode)
    }
}
function publicGroupTreeShowChildren(treeNode) {
    if (treeNode.isParent) {
        for ( var idx in treeNode.children) {
            var node = treeNode.children[idx];
            publicGroupTree.showNode(node);
            publicGroupTreeShowChildren(node);
        }
    }
}
function publicGroupTreeShowParent(treeNode) {
    var parentNode;
    while ((parentNode = treeNode.getParentNode()) != null) {
        publicGroupTree.showNode(parentNode);
        publicGroupTree.expandNode(parentNode, true, false, false);
        treeNode = parentNode;
    }
}
function publicGroupTreeShowAllNode(nodes) {
    nodes = publicGroupTree.transformToArray(nodes);
    for (var i = nodes.length - 1; i >= 0; i--) {
        if (nodes[i].getParentNode() != null) {
            publicGroupTree.expandNode(nodes[i], false, false, false, false);
        } else {
            publicGroupTree.expandNode(nodes[i], true, true, false, false);
        }
        publicGroupTree.showNode(nodes[i]);
        publicGroupTreeShowAllNode(nodes[i].children);
    }
}
function publicGroupTreeHideAllNode(nodes) {
    nodes = publicGroupTree.transformToArray(nodes);
    for (var i = nodes.length - 1; i >= 0; i--) {
        publicGroupTree.hideNode(nodes[i]);
    }
}

function publicGroupSearch($this) {
    $('#publicGroupSearch').slideToggle(200);
    $('#publicGroupBtnShow').toggle();
    $('#publicGroupBtnHide').toggle();
    $('#publicGroupKeyword').focus();
}
//个人群组
var privateGroupTree ;
var initPrivateGroupTree = function(url) {
    var setting = {
            view : {
                selectedMulti : false,
                dblClickExpand : false
            },
            check : {
                enable : false,
                nocheckInherit : true,
                chkboxType: { "Y": "s", "N": "s" }
            },
            data : {
                simpleData : {
                    enable : true
                }
            },
        callback : {
            onClick : function(event, treeId, treeNode) {
                onclick(event, treeId, treeNode);
            },
            onDblClick : function(event, treeId, treeNode) {
                if(treeNode.isParent){
                    $.messager.popover({msg: '不可以选择部门哦！',type:'info',timeout: 2000,showType: 'show'});
                    return false;
				}else {
                    ondbclick(event, treeId, treeNode);
                }
            }
        }
        };
    $.get(url + "?t=" + new Date().getTime(), function(zNodes) {
        privateGroupTree = $.fn.zTree.init($("#privateGroupTree"), setting, zNodes);
    });
};

var privateGroupLastValue = "", privateGroupTreeNodeList = [], privateGroupKeyword = $("#privateGroupKeyword");
privateGroupKeyword.bind("focus", privateGroupFocusKey).bind("blur", privateGroupBlurKey).bind("change cut input propertychange", privateGroupSearchNode);
privateGroupKeyword.bind("keydown", function(e) {
    if (e.which == 13) {
        privateGroupSearchNode();
    }
});
function privateGroupFocusKey(e) {
    if (privateGroupKeyword.hasClass("empty")) {
        privateGroupKeyword.removeClass("empty");
    }
}
function privateGroupBlurKey(e) {
    if (privateGroupKeyword.get(0).value === "") {
        privateGroupKeyword.addClass("empty");
    }
    privateGroupSearchNode(e);
}

function privateGroupSearchNode() {
    var value = $.trim(privateGroupKeyword.get(0).value);
    if (privateGroupLastValue === value) {
        return;
    }
    privateGroupLastValue = value;
    var nodes = privateGroupTree.getNodes();
    if (value == "") {
        privateGroupTreeShowAllNode(nodes);
        return;
    }
    privateGroupTreeHideAllNode(nodes);
    var ls1  = privateGroupTree.getNodesByParamFuzzy("name", value);
    var ls2 = privateGroupTree.getNodesByParamFuzzy("pinyin", value);
    var ls3 = privateGroupTree.getNodesByParamFuzzy("initials", value);
    privateGroupTreeNodeList = ls1;
    privateGroupTreeNodeList = privateGroupTreeNodeList.concat(ls2);
    privateGroupTreeNodeList = privateGroupTreeNodeList.concat(ls3);
    privateGroupTreeUpdateNodes(privateGroupTreeNodeList);
}

function privateGroupTreeUpdateNodes(nodes) {
    privateGroupTree.showNodes(nodes);
    for (var i = 0, l = nodes.length; i < l; i++) {
        var treeNode = nodes[i];
        privateGroupTreeShowChildren(treeNode);
        privateGroupTreeShowParent(treeNode)
    }
}
function privateGroupTreeShowChildren(treeNode) {
    if (treeNode.isParent) {
        for ( var idx in treeNode.children) {
            var node = treeNode.children[idx];
            privateGroupTree.showNode(node);
            privateGroupTreeShowChildren(node);
        }
    }
}
function privateGroupTreeShowParent(treeNode) {
    var parentNode;
    while ((parentNode = treeNode.getParentNode()) != null) {
        privateGroupTree.showNode(parentNode);
        privateGroupTree.expandNode(parentNode, true, false, false);
        treeNode = parentNode;
    }
}
function privateGroupTreeShowAllNode(nodes) {
    nodes = privateGroupTree.transformToArray(nodes);
    for (var i = nodes.length - 1; i >= 0; i--) {
        if (nodes[i].getParentNode() != null) {
            privateGroupTree.expandNode(nodes[i], false, false, false, false);
        } else {
            privateGroupTree.expandNode(nodes[i], true, true, false, false);
        }
        privateGroupTree.showNode(nodes[i]);
        privateGroupTreeShowAllNode(nodes[i].children);
    }
}
function privateGroupTreeHideAllNode(nodes) {
    nodes = privateGroupTree.transformToArray(nodes);
    for (var i = nodes.length - 1; i >= 0; i--) {
        privateGroupTree.hideNode(nodes[i]);
    }
}

function privateGroupSearch($this) {
    $('#privateGroupSearch').slideToggle(200);
    $('#privateGroupBtnShow').toggle();
    $('#privateGroupBtnHide').toggle();
    $('#privateGroupKeyword').focus();
}
</script>

</body>
</html>